<template>
  <div class="article-box">
    <!-- 面包屑 -->
    <el-breadcrumb separator-icon="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>文章管理</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片内容 -->
    <el-card>
      <!-- 头部内容 -->
      <template #header>
        <div class="card-header">
          <span>共 {{ totalCount }} 条记录</span>
          <el-button
            type="primary"
            @click="onOpen(ARTICLE_OPS_TYPE.add, '')"
            round
          >
            <el-icon>
              <Plus />
            </el-icon>
            <span>新增文章</span>
          </el-button>
        </div>
      </template>
      <!-- 主体内容 -->
      <el-table
        border
        stripe
        :data="articleList"
        row-key="id"
      >
        <el-table-column
          label="标题"
          width="250"
          prop="stem"
        />
        <el-table-column
          label="作者"
          width="200"
          prop="creator"
        />
        <el-table-column
          label="类别"
          width="140"
          prop="category"
        />
        <el-table-column
          label="点赞"
          width="140"
          sortable
          prop="likeCount"
        />
        <el-table-column
          label="浏览度"
          width="140"
          sortable
          prop="views"
        />
        <el-table-column
          label="创建时间"
          width="200"
          prop="createdAt"
        />
        <el-table-column label="操作">
          <template #default="{ row }">
            <el-tooltip
              effect="dark"
              content="预览"
              placement="bottom"
            >
              <el-icon
                :size="18"
                @click="onOpen(ARTICLE_OPS_TYPE.preview, row.id)"
              >
                <View />
              </el-icon>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="编辑"
              placement="bottom"
            >
              <el-icon
                @click="onOpen(ARTICLE_OPS_TYPE.edit, row.id)"
                :size="18"
              >
                <Edit />
              </el-icon>
            </el-tooltip>
            <el-tooltip
              effect="dark"
              content="删除"
              placement="bottom"
            >
              <el-icon
                :size="18"
                @click="delArticleById(row.id)"
              >
                <Delete />
              </el-icon>
            </el-tooltip>
          </template>
        </el-table-column>

      </el-table>
      <!-- 底部内容 -->
      <template #footer>
        <!-- 
          current-change 是表示页面切换事件
          total 表示总页数
          current-page 表示当前页面数 可以双向数据绑定
          page-size 表示每页的数目
          background 添加背景色
          layout 布局 表示可以有 前一页 主体内容 后一页
        -->
        <el-pagination
          @current-change="onCurrentChange"
          :total="totalCount"
          :current-page="query.current"
          :page-size="query.pageSize"
          background
          layout="prev, pager, next"
        ></el-pagination>
      </template>
    </el-card>

    <!-- 抽屉组件 -->
    <el-drawer
      :title="articleTitle"
      v-model="visiable"
      direction="rtl"
      size="50%"
    >
      <!-- 
        文章操作组件
          如果传入的 key 不同 那么就会重新加载一次 这样就可以更新内部的数据了
          不然就使用原来的（第一次的） 那么就不会更新数据
      -->
      <article-ops
        :curArticleOpsType="curArticleOpsType"
        :articleId="articleId"
        :key="articleId"
        @finish="onFinish"
      />
    </el-drawer>
  </div>
</template>

<script setup>
  import { getArticleListApi, delArticleByIdApi } from '@/api/article';
  import { ElMessageBox } from 'element-plus';
  import { reactive, ref, computed } from 'vue';
  import ArticleOps from './components/ArticleOps.vue'
  import { ARTICLE_OPS_TYPE } from '@/constant/article'
  // 文章列表的查询参数
  const query = reactive({
    current: 1, // 当前页面
    pageSize: 10 // 每页页数
  })

  // 文章列表
  const articleList = ref([])
  // 文章总个数
  const totalCount = ref(0)


  // 获取文章列表
  async function getArticleList() {
    // 获取文章数据
    const { rows, total } = await getArticleListApi(query)
    // 将对应的数据封装为响应式
    articleList.value = rows
    totalCount.value = total
  }
  getArticleList()

  // 当前页码改变
  const onCurrentChange = (newVal) => {
    // 更新 query 中的页码
    query.current = newVal
    // 发送请求
    getArticleList()
  }

  // 通过Id 删除文章
  const delArticleById = async (articleId) => {
    try {
      // 消息提示： 主体内容 标题 样式
      // 按确认返回一个成功态的Promise 按失败返回一个失败态的Promise
      await ElMessageBox.confirm('确认要删除当前文章吗', '温馨提示', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      })

      // 执行删除
      delArticleByIdApi(articleId)
      // 重新获取数据
      getArticleList()
    } catch (e) { }
  }

  // 这样写有一个很重要的前提是 key 必须相同

  // 文章标题中英映射关系
  const ARTICLE_TITLE_MAP = {
    add: '添加',
    edit: '编辑',
    preview: '预览'
  }

  // 抽屉组件的状态
  const visiable = ref(false)
  // 当前的文章的 key
  const curArticleOpsType = ref(null)
  // 当前文章id
  const articleId = ref('')
  // 当前文章的标题
  const articleTitle = computed(() => {
    return ARTICLE_TITLE_MAP[curArticleOpsType.value] + '文章'
  })

  // 打开抽屉组件
  const onOpen = (key, id) => {
    // 打开
    visiable.value = true
    // 设置文章 key
    curArticleOpsType.value = key
    // 设置当前文章的 id 没有就是空字符串
    articleId.value = id
  }

  // 关闭抽屉组件
  const onClose = () => {
    visiable.value = false
  }

  // 完成结束编辑（添加）
  const onFinish = () => {
    // 关闭抽屉
    onClose()
    // 重新刷新列表
    getArticleList()
  }
</script>

<style scoped lang="scss">
  .article-box {
    .el-card {
      margin-top: 25px;

      .card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .el-table {
        height: 50vh;

        .el-icon {
          margin: 0 5px;
        }
      }

      :deep(.el-card__footer) {
        margin-top: -15px;
        border-top: none;

      }

      .el-pagination {
        display: flex;
        justify-content: center;
      }
    }
  }
</style>